<template>
  <div>
    <el-row style="margin-top: 40px">
      <el-col :span="18" :offset="3">
        <el-card shadow="always" class="box-card" style="height: 580px">

          <!--头部工具栏(导入学生、条件搜索、添加学生)-->
          <el-row style="margin-top: 20px">
            <el-col :span="3">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                plain
                round
                @click="addDialog=true">添加学生
              </el-button>
            </el-col>
            <el-col :span="2">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                plain
                round
                @click="importDialog=true">导入学生
              </el-button>
            </el-col>
            <el-col :span="4" :offset="14">
              <el-input
                placeholder="请输入学号/班级"
                size="small"
                v-model="condition"
                suffix-icon="el-icon-search"
                @input="search"
                clearable>
              </el-input>
            </el-col>
          </el-row>

          <!--表格主体-->
          <el-row style="margin-top: 10px">
            <el-table
              :data="tableData"
              max-height="419"
              style="width: 100%">
              <el-table-column
                label="学号"
                fixed="left"
                header-align="center"
                align="center"
                width="130">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.username }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="班级"
                header-align="center"
                align="center"
                width="130">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.className }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="昵称"
                header-align="center"
                align="center"
                width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.nickname }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="姓名"
                header-align="center"
                align="center"
                width="120">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="性别"
                header-align="center"
                align="center"
                width="80">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.gender == 0 ? '男' : '女' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="联系电话"
                header-align="center"
                align="center"
                width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.mobile }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="出生日期"
                header-align="center"
                align="center"
                width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.birthday|dateFmt('yyyy-MM-DD') }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="邮箱地址"
                header-align="center"
                align="center"
                width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.email }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="账户情况"
                header-align="center"
                align="center"
                width="130">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.status ===0" style="margin-left: 10px">账号正常</el-tag>
                  <el-tag type="warning" v-if="scope.row.status ===1" style="margin-left: 10px">未修改密码</el-tag>
                  <el-tag type="danger" v-if="scope.row.status ===2" style="margin-left: 10px">账号已禁用</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                fixed="right"
                width="180"
                align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.status === 0"
                    size="small"
                    type="text"
                    @click="disable(scope.$index, scope.row)">禁用
                  </el-button>
                  <el-button
                    v-else-if="scope.row.status === 2"
                    size="small"
                    type="text"
                    @click="enable(scope.$index, scope.row)">启用
                  </el-button>
                  <el-button
                    size="small"
                    type="text"
                    @click="handleEdit(scope.$index, scope.row)">编辑
                  </el-button>
                  <el-button
                    size="small"
                    type="text"
                    @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                  <el-button
                    size="small"
                    type="text"
                    @click="reset(scope.$index, scope.row)">重置密码
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>

          <!--分页组件-->
          <el-row style="margin-top: 30px">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              layout="total, prev,pager, next, jumper"
              :total="total"
              :page-size="limit">
            </el-pagination>
          </el-row>

        </el-card>

      </el-col>
    </el-row>

    <!--导入学生-->
    <el-dialog
      title="导入学生"
      :visible.sync="importDialog"
      width="30%"
      center>
      <div>
        <el-button size="small" type="success" @click="download">下载模板</el-button>
        <div style="margin-top: 10px;font-weight: bolder;color: red">请根据模板进行导入学生</div>
        <el-upload
          style="margin-top: 30px"
          class="upload-demo"
          action="/api/user/import"
          ref="upload"
          :headers="{Authorization:this.$store.state.authorization}"
          multiple
          :limit="3"
        >
          <el-button size="small" type="primary">点击选择Excel</el-button>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="importCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--添加学生-->
    <el-dialog
      title="添加学生"
      :visible.sync="addDialog"
      width="30%"
      top="40px"
      :lock-scroll="false"
      style="overflow-y: hidden"
      center>
      <div>
        <el-form label-position="left" label-width="80px" ref="addForm" :rules="addRule" :model="addForm">
          <el-form-item label="学号" prop="username">
            <el-input v-model="addForm.username"></el-input>
          </el-form-item>
          <el-form-item label="班级" prop="classId">
            <el-select clearable filterable v-model="addForm.classId" placeholder="请选择班级" style="width:100%">
              <el-option v-for="(item,index) in classList" :key="index" :label="item.className"
                         :value="item.classId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="addForm.nickname"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="addForm.gender" placeholder="请选择性别" style="width:100%">
              <el-option v-for="(item,index) in sex" :key="index" :label="item.key" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式" prop="mobile">
            <el-input v-model="addForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
              style="width:100%"
              v-model="addForm.birthday"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="邮箱地址" prop="email">
            <el-input v-model="addForm.email"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCancel">取 消</el-button>
        <el-button type="primary" @click="addStudent" style="margin-left: 60px">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑学生-->
    <el-dialog
      title="编辑学生"
      :visible.sync="updateDialog"
      width="30%"
      center>
      <div>
        <el-form label-position="left" :hide-required-asterisk="true" label-width="80px" ref="updateForm"
                 :rules="updateRule" :model="updateForm">
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="updateForm.nickname"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="updateForm.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="updateForm.gender" placeholder="请选择性别" style="width:100%">
              <el-option v-for="(item,index) in sex" :key="index" :label="item.key" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级" prop="classId">
            <el-select clearable filterable v-model="updateForm.classId" placeholder="请选择班级" style="width:100%">
              <el-option v-for="(item,index) in classList" :key="index" :label="item.className"
                         :value="item.classId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式" prop="mobile">
            <el-input v-model="updateForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
              style="width:100%"
              v-model="updateForm.birthday"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="邮箱地址" prop="email">
            <el-input v-model="updateForm.email"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateCancel">取 消</el-button>
        <el-button type="primary" @click="updateStudent" style="margin-left: 60px">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Class',
  data () {
    return {
      currentPage: 1,
      limit: 6,
      total: 0,
      condition: '',
      tableData: [],
      importDialog: false,
      updateDialog: false,
      addDialog: false,
      classList: [],
      addForm: {
        username: '',
        classId: '',
        nickname: '',
        name: '',
        gender: '',
        mobile: '',
        birthday: '',
        email: '',
      },
      addRule: {
        username: [
          {
            required: true,
            message: '请输入想要添加学生的学号',
            trigger: 'blur'
          },
          {
            min: 4,
            max: 12,
            message: '长度在 4 到 12 个字符',
            trigger: 'blur'
          }
        ],
        classId: [
          {
            required: true,
            message: '请选择班级',
            trigger: 'blur'
          }
        ],
        email: [
          {
            type: 'email',
            required: true,
            message: '请输入正确的邮箱',
            trigger: 'blur'
          }
        ]
      },
      updateForm: {
        id: '',
        classId: 0,
        nickname: '',
        name: '',
        gender: '',
        mobile: '',
        birthday: '',
        email: '',
      },
      updateRule: {
        classId: [
          {
            required: true,
            message: '请选择班级',
            trigger: 'blur'
          }
        ],
        email: [
          {
            type: 'email',
            required: true,
            message: '请输入正确的邮箱',
            trigger: 'blur'
          }
        ]
      },
      sex: [{
        key: '男',
        value: 0
      }, {
        key: '女',
        value: 1
      }],
    }
  },
  methods: {
    download () {
      window.location.href = 'http://localhost/common/template'
    },
    disable (index, row) {
      this.$http({
        url: '/api/user/disable/' + row.id,
        method: 'post'
      }).then(res => {
        if (res.data.code === 2000) {
          this.init()
          this.$message({
            type: 'success',
            message: '账户已禁用:' + row.username,
            duration: 1500,
          })
        } else {
          this.$message({
            type: 'error',
            message: '账户禁用失败!',
            duration: 2000,
          })
        }
      })
    },
    enable (index, row) {
      this.$http({
        url: '/api/user/enable/' + row.id,
        method: 'post'
      }).then(res => {
        if (res.data.code === 2000) {
          this.init()
          this.$message({
            type: 'success',
            message: '账户已启用:' + row.username,
            duration: 1500,
          })
        } else {
          this.$message({
            type: 'error',
            message: '账户启用失败!',
            duration: 2000,
          })
        }
      })
    },
    importCancel () {
      this.importDialog = false
      this.$refs.upload.clearFiles()
    },
    addCancel () {
      this.addForm = {
        username: '',
        classId: '',
        nickname: '',
        name: '',
        gender: '',
        mobile: '',
        birthday: '',
        email: '',
      }
      this.addDialog = false
    },
    addStudent () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$http({
            url: '/api/user/add',
            method: 'post',
            data: {
              username: this.addForm.username,
              nickname: this.addForm.nickname,
              classId: this.addForm.classId,
              name: this.addForm.name,
              gender: this.addForm.gender,
              mobile: this.addForm.mobile,
              birthday: this.addForm.birthday,
              email: this.addForm.email,
            }
          }).then(res => {
            if (res.data.code === 2000) {
              this.$message({
                type: 'success',
                message: '成功添加新的学生！',
                center: true,
                duration: 1000
              })
              this.addDialog = false
              this.init()
            } else {
              //1.清空表单
              this.$refs.addForm.resetFields()
              //2.输出错误信息
              this.$message({
                type: 'warning',
                showClose: true,
                message: '添加失败，用户名或邮箱重复！',
                center: true,
              })
            }
          })
        } else {
          this.$message({
            type: 'warning',
            showClose: true,
            message: '请正确填写信息！',
            center: true,
          })
        }
      })
    },
    handleEdit (index, row) {
      this.updateForm.id = row.id
      this.updateForm.nickname = row.nickname
      this.updateForm.name = row.name
      this.updateForm.gender = row.gender
      this.updateForm.mobile = row.mobile
      this.updateForm.birthday = row.birthday
      this.updateForm.classId = row.classId
      this.updateForm.email = row.email
      this.updateDialog = true
    },
    updateCancel () {
      this.updateForm = {
        id: '',
        classId: 0,
        nickname: '',
        name: '',
        gender: '',
        mobile: '',
        birthday: '',
        email: '',
      }
      this.updateDialog = false
    },
    updateStudent () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$http({
            url: '/api/user/edit',
            method: 'post',
            data: {
              id: this.updateForm.id,
              nickname: this.updateForm.nickname,
              classId: this.updateForm.classId,
              name: this.updateForm.name,
              gender: this.updateForm.gender,
              mobile: this.updateForm.mobile,
              birthday: this.updateForm.birthday,
              email: this.updateForm.email,
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '成功更新学生信息！',
                center: true,
                duration: 1000
              })
              this.updateDialog = false
              this.init()
            } else {
              //1.清空表单
              this.$refs.updateForm.resetFields()
              //2.输出错误信息
              this.$message({
                type: 'warning',
                showClose: true,
                message: '更新失败，请重新尝试！',
                center: true,
              })
            }
          })
        } else {
          this.$message({
            type: 'warning',
            showClose: true,
            message: '请正确填写信息！',
            center: true,
          })
        }
      })
    },
    handleDelete (index, row) {
      this.$http({
        url: '/api/user/del/' + row.id,
        method: 'post'
      }).then(res => {
        if (res.data.code === 2000) {
          this.init()
          this.$message({
            type: 'success',
            message: '成功删除学生:' + row.username,
            duration: 1500,
          })
        } else {
          this.$message({
            type: 'error',
            message: '删除学生失败!',
            duration: 2000,
          })
        }
      })
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    },
    search () {
      this.init()
    },
    reset (index, row) {
      this.$confirm('此操作将重置学生密码,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('/api/user/reset/' + row.id).then(res => {
          if (res.data.code === 6060) {
            this.$message({
              type: 'success',
              message: '重置密码成功!',
              duration: 1500,
            })
          } else {
            this.$message({
              type: 'error',
              message: '重置密码失败!',
              duration: 1500,
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        })
      })
    },
    init () {
      this.$http({
        url: '/api/user/list',
        method: 'get',
        params: {
          condition: this.condition,
          page: this.currentPage,
          limit: this.limit
        },
      }).then(res => {
        this.total = res.data.result.total
        this.tableData = res.data.result.records
      })

      this.$http({
        url: '/api/class/nameList',
        method: 'get'
      }).then(res => {
        this.classList = res.data.result
      })
    },
  },
  created () {
    this.init()
  }
}
</script>

<style scoped>

</style>
